<template>
	<header-common title="帖子详情"></header-common>

	<!-- 轮播 -->
	<view>
		<uv-swiper :list="list" indicator indicatorMode="line" circular :border="false" height="240"></uv-swiper>
	</view>

	<!-- 用户 -->
	<view class="user">
		<image :src="data.userImg" mode="aspectFill"></image>
		<view class="user-name">
			{{data.userName}}
		</view>
		<view  class="attention">
			<uv-icon color="#fff" name="plus"></uv-icon>
			&nbsp;
			关注
		</view>
		
		<view v-if="false" class="attention" style="background-color: #999;">
			已关注
		</view>
	</view>

	<!-- 标题 -->
	<view class="title">
		{{data.title}}
	</view>

	<!-- 内容 -->
	<view class="content">
		{{data.msg}}
	</view>

	<view class="" style="width: 100vw; height: 12rpx; background-color: #fbfbfb;">

	</view>

	<!-- 评论 -->
	<CComment ref="ccRef" v-model:myInfo="myInfo" v-model:userInfo="userInfo" v-model:tableData="tableData"
		v-model:tableTotal="tableTotal" :deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun"
		@deleteFun="deleteFun"></CComment>

	<!-- 底部评论 点赞 收藏 -->
	<div class="bottom-i"></div>
	<view class="bottom-box">
		<view class="btn" @tap="openComment">天青色等烟雨, 评论区在等你</view>
		<view class="icon-box" @click="myLike">
			<!-- <uv-icon name="thumb-up-fill" color="#8a9197" size="28"></uv-icon> -->
			<uv-icon name="thumb-up-fill" color="red" size="28"></uv-icon>
			<view class="icon-text">88</view>
		</view>
		<view class="icon-box" @click="myCollect">
			<uv-icon name="star-fill" color="#8a9197" size="28"></uv-icon>
			<view class="icon-text">24</view>
		</view>
	</view>

	<!-- 提示内容 -->
	<uv-toast ref="toast"></uv-toast>
</template>

<script setup>
	import CComment from "@/components/cc-comment/cc-comment.vue";
	import {
		ref,
		onMounted,
		computed,
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		request_details,
		request_sendComment,
		request_FocusUser,
		request_like,
		request_collect
	} from '@/api/axios.js'

	// 响应式参数存储
	const routeParams = ref({})
	// 帖子id
	const articleID = ref(null)

	// 使用 uni-app 生命周期
	 onLoad(async (options) => {
		routeParams.value = options;
		// console.log('页面参数:', options)
		articleID.value = options.id;
		// 发送请求, 获取详情
		let res = await request_details({id:articleID.value});
		// 赋值, 展现轮播\用户\\标题\文本\评论
		
	})

	// 获取当前路由路径
	const currentRoute = ref('')
	const pages = getCurrentPages()
	if (pages.length) {
		currentRoute.value = pages[pages.length - 1].route;
		console.log("currentRoute.value", currentRoute.value);
	}



	// 评论 
	let list = ref([
		'https://image.szcits.cn/Public/Uploads/Travel/ctrip/line/22978692/100w12000000s8uklB76D_D_520_350_Q100.jpg',
		'https://image.szcits.cn/Public/Uploads/Travel/ctrip/line/22978692/10050x000000liagq68BF_D_520_350_Q100.jpg',
	]);

	let data = ref({
		userName: "中国式相亲官方",
		userImg: "https://image.szcits.cn/Public/Uploads/Travel/ctrip/line/24954197/300614000000x4n4f7255_D_520_350_Q100.jpg",
		title: "《中国式相亲》2025年更新计划&当前进度",
		msg: "大家好!我们是《中国式相亲》制作组波浪游戏以及发行商LightningGames，感谢每一位玩家在游戏上线以来给予我们的支持、反馈和热情关注。无论是Steam评论区的犀利评论，B站的精彩解说，还是玩家群里热烈的讨论，都让我们深刻体会到这款游戏能被大家玩到并讨论，是多么难得和幸运的一件事。同时我们也深知，游戏随着体验的深入，暴露出了一些问题。对此，我们将始终坚持积极响应，及时行动，争取在游戏进入稳定前做到日更修复，确保大家的游玩体验不受影响，包括使用修改器导致游戏卡死的问题，我们均已完成修复，并通过更新发布。",
		tabs: [{
			id: 1,
			title: "游戏",
			id: 2,
			title: "公告"
		}]
	})

	// 唤起新评论弹框
	let ccRef = ref(null);

	function openComment() {
		ccRef.value.newCommentFun();
	}

	// 点赞回调事件
	function likeFun({
		params
	}, callback) {
		console.log("likeFun", params);
		// 当请求失败, 调用callback重置点赞效果;
		// Demo如下:
		// axios.post("http://xxx/like", { id: params }).then((res) => {
		//   if (res.code !== 0) {
		//     callback(res);
		//   }
		// });
	}

	// 评论回调事件 
	async function replyFun({
		params
	}, callback) {
		console.log("replyFun", params);
		console.log("回复的用户id",params.reply_id);
		
		// 回复消息
		if(params.reply_id) {
			let res = await request_sendComment({...params,userId:id});
		} else {
			// 回复帖子
		}
		
		// 当请求成功, 调用callback执行评论插入;
		// Demo如下:
		// axios.post("http://xxx/reply", { ...params }).then((res) => {
		//   if (res.code === 0) {
		//     callback(res);
		//   }
		// });

		const res = {
			id: Math.random()
		}; // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
		setTimeout(() => callback(res), 500); // 目前为了展示效果, 直接执行callback
	}

	/** 删除回调事件
	 * mode 删除模式
	 * -- bind: 当被删除的一级评论存在回复评论, 那么该用户评论内容变更显示为[当前用户评论内容已被移除]
	 * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
	 * -- all : 删除所有评论包括回复评论
	 */
	const deleteMode = ref("all");

	function deleteFun({
		params,
		mode
	}, callback) {
		console.log("deleteFun", {
			params,
			mode
		});
		// 当请求成功, 调用callback执行评论删除;
		// Demo如下:
		// axios.post("http://xxx/delete", { ids: params, mode }).then((res) => {
		//   if (res.code === 0) {
		//     callback(res);
		//   }
		// });
		switch (mode) {
			case "bind":
				// 逻辑: 调用接口进行用户评论内容修改 update
				setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				break;
			case "only":
				// 逻辑: 调用接口删除一个评论 delete
				setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				break;
			default:
				// all
				// 逻辑: 调用接口删除多个评论 [delete]
				setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				break;
		}
	}

	// ----模拟数据------模拟数据------模拟数据----
	// 当前登录用户信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
	let myInfo = ref({
		user_id: 1, // 用户id
		user_name: "cc", // 用户名
		user_avatar: "https://img0.baidu.com/it/u=2836960144,3650263035&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=474", // 用户头像地址
	});
	// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
	let userInfo = ref({
		user_id: 2, // 用户id
		user_name: "ikun", // 用户名
		user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
	});
	let tableTotal = ref(4); // 评论总数
	let tableData = ref([{
			id: 120, // 评论id
			parent_id: null, // 评论父级的id
			reply_id: null, // 被回复评论的id
			reply_name: null, // 被回复人名称
			user_id: 2, // 用户id
			user_name: "ikun", // 用户名
			user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
			user_content: "唱,跳,rap,篮球", // 用户评论内容
			is_like: false, // 用户是否点赞
			like_count: 120, // 点赞数统计
			create_time: "2025-02-19 09:16", // 创建时间
		},
		{
			id: 130,
			parent_id: 120, // 评论父级的id
			reply_id: 120, // 被回复评论的id
			reply_name: "ikun", // 被回复人名称
			user_id: 3, // 用户id
			user_name: "小黑子", // 用户名
			user_avatar: "https://pic2.zhimg.com/80/v2-06eade66ec837713d765b1557bf20b25_720w.webp", // 用户头像地址
			user_content: "姬霓太美~祝自己生日快乐~~", // 用户评论内容
			is_like: false, // 用户是否点赞
			like_count: 67, // 点赞数统计
			create_time: "2025-03-07 00:06", // 创建时间
		},
		{
			id: 140,
			parent_id: 120, // 评论父级的id
			reply_id: 130, // 被回复评论的id
			reply_name: "小黑子", // 被回复人名称
			user_id: 4, // 用户id
			user_name: "守护宗主维护宗门", // 用户名
			user_avatar: "https://pic3.zhimg.com/80/v2-244696a62fa750b8570cf56bfaa5b26a_720w.webp", // 用户头像地址
			user_content: "你露出鸡脚了", // 用户评论内容
			is_like: false, // 用户是否点赞
			like_count: 16, // 点赞数统计
			create_time: "2025-05-10 17:08", // 创建时间
		},
		{
			id: 150,
			parent_id: null, // 评论父级的id
			reply_id: null, // 被回复评论的id
			reply_name: null, // 被回复人名称
			user_id: 5, // 用户id
			user_name: "音乐制作人", // 用户名
			user_avatar: "https://pic2.zhimg.com/80/v2-88ec6f8c6d3305122664dd18a28730e5_720w.webp", // 用户头像地址
			user_content: "只因你太美baby 只因你太美baby 只因你实在是太美baby 只因你太美baby 迎面走来的你让我如此蠢蠢欲动 这种感觉我从未有 Cause I got a crush on you who you 你是我的 我是你的 谁 再多一眼看一眼就会爆炸 再近一点靠近点快被融化", // 用户评论内容
			is_like: true, // 用户是否点赞
			like_count: 8, // 点赞数统计
			create_time: "2025-12-21 00:45", // 创建时间
		},
	]); // 评论表


	const toast = ref(null)
	// 点赞
	async function myLike() {
		// 文章点赞
		// let res = await request_like()

	}

	// 收藏
	async function myCollect() {
		// let res = await request_collect()

		toast.value.show({
			type: 'default',
			title: '默认主题',
			message: "已收藏",
			// complete() {
			// 	params.url && uni.navigateTo({
			// 		url: params.url
			// 	})
			// }
		})


	}
</script>


<style lang="scss" scoped>
	// .btn {
	// 	text-align: center;
	// 	color: #fff;
	// 	padding: 20rpx;
	// 	margin: 50rpx;
	// 	border-radius: 20rpx;
	// 	background-color: #2979ff;
	// }

	.user {
		display: flex;
		padding: 12rpx 24rpx;
		height: 60rpx;
		align-items: center;
		margin-bottom: 12rpx;

		&>image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}

		.user-name {
			font-size: 14px;
			padding-left: 16rpx;
		}

		.attention {
			display: flex;
			font-size: 14px;
			color: #fff;
			background-color: #000;
			border-radius: 12rpx;
			padding: 6rpx 16rpx;
			margin-left: auto;
			margin-right: 20rpx;
			box-sizing: border-box;
		}
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 12rpx;
		padding: 12rpx 24rpx;
	}

	.content {
		font-size: 15px;
		line-height: 1.5;
		margin-bottom: 12rpx;
		padding: 12rpx 24rpx;
	}

	.bottom-i {
		height: 140rpx;
	}

	.bottom-box {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		width: 100vw;
		height: 120rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.btn {
		// padding: 12;
		width: 500rpx;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 13px;

		color: #d0d0d0;
		background-color: #f7f8fa;
		padding-left: 30rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		margin-right: 24rpx;
	}

	.icon-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		background-color: #fff;
		margin-right: 24rpx;
		// display: flex;
		font-size: 12px;
		text-align: center;
	}
</style>